<template>
      <div id="papersEdit">
            <el-card>
                  <div slot="header">编辑问卷</div>
                  <!-- 编辑问卷 -->
                  <el-form :model="formData" :rules="rules" ref="formData" label-width="100px" label-position="left" v-loading="treeLoading">
                        <!-- 问卷编辑 -->
                        <el-form-item label="标题" prop="title">
                              <el-input v-model="formData.title"></el-input>
                        </el-form-item>
                        <!-- 问卷大纲 -->
                        <el-form-item label="大纲" prop="content">
                              <el-tree ref="tree" node-key="id" :data="outlineList" :props="{children:'children',label:'value'}" show-checkbox :render-after-expand="false" @check-change="selectNode"></el-tree>
                        </el-form-item>
                        <!-- 问卷选项 -->
                        <el-form-item label="选项" prop="item_id">
                              <el-select v-model="formData.item_id" placeholder="请选择选项">
                                    <el-option :label="items.text" :value="items.id" v-for="items in itemsList" :key="items.id"></el-option>
                              </el-select>
                        </el-form-item>
                        <!-- 问卷班级 -->
                        <el-form-item label="班级" prop="classes_id">
                              <el-select v-model="formData.classes_id" placeholder="请选择班级">
                                    <el-option :label="items.classname" :value="items.id" v-for="items in classesList" :key="items.id"></el-option>
                              </el-select>
                        </el-form-item>
                        <el-form-item>
                              <el-button type="primary" :icon="btnIcon" :disabled="buttonDisabled" @click="paperEdit">确定</el-button>
                              <el-button>取消</el-button>
                        </el-form-item>
                  </el-form>
            </el-card>
      </div>   
</template>
<script>
export default {
      props:['id'],
      data(){
            return {
                  btnIcon:'',
                  buttonDisabled:false,
                  itemsList:[],
                  outlineList:[],
                  classesList:[],
                  treeLoading:false,
                  formData:{
                        title:'',
                        content:[],
                        item_id:'',
                        classes_id:''
                  },
                  rules:{
                      title:[
                              {required:true,message:'请输入标题',trigger:'blur'}
                      ],
                      content:[
                              {required:true,message:'请选择内容',trigger:'blur'}
                      ],
                      item_id:[
                              {required:true,message:'请选择选项',trigger:'blur'}
                      ],
                      classes_id:[
                              {required:true,message:'请选择班级',trigger:'blur'}
                      ]
                  }  
            }
      },
      methods:{
            // 获取大纲列表方法
            getOutlineList() {
                  this.$http.get("/items/list").then(result => {
                        if (result.data.error > 0 && result.data.error==4) {
                              this.$router.push('/users/login')
                              return
                        }
                        this.itemsList = this.$tree(result.data.data);
                  }).catch(error=>{
                        console.log(error)
                  })
            },
            // 获取选项列表方法
            getItemsList() {
                  this.$http.get("/outline/list").then(result => {
                        if (result.data.error > 0 && result.data.error==4) {
                              this.$router.push('/users/login')
                              return
                        }
                        this.outlineList = this.$tree(result.data.data);
                  }).catch(error=>{
                        console.log(error)
                  })
            },
            // 获取选项列表方法
            getClassesList() {
                  this.$http.get("/classes/listall").then(result => {
                        if (result.data.error > 0 && result.data.error==4) {
                              this.$router.push('/users/login')
                              return
                        }
                        this.classesList = result.data.data;
                  }).catch(error=>{
                        console.log(error)
                  })
            },
            // 大纲树组件选择事件
            selectNode(data,isSelect){
                  if(data.children.length>0){return}
                  if(isSelect){
                        this.formData.content.push(data)
                  }else{
                        let index=this.formData.content.indexOf(data)
                        this.formData.content.splice(index,1)
                  }
            },
            // 获取编辑的问卷的所有数据
            getPaperList(){
                  this.treeLoading=true
                  this.$http.get(`/papers/one?id=${this.id}`).then(result=>{
                        if (result.data.error > 0 && result.data.error==4) {
                              this.$router.push('/users/login')
                              return
                        }
                        this.treeLoading=false
                        this.formData.title=result.data.data.title
                        this.formData.item_id=+result.data.data.item_id
                        this.formData.classes_id=+result.data.data.classes_id
                        // var keys=JSON.parse(result.data.data.content).map((el)=>{
                        //       console.log(el)
                        //       return el.id
                        // })
                        this.$refs.tree.setCheckedNodes(JSON.parse(result.data.data.content))

                  }).catch(error=>{
                        console.log(error)
                  })
            },
            // 编辑确认
            paperEdit(){
                  this.$refs.formData.validate(pass=>{
                        if(!pass){return} 
                        this.btnIcon='el-icon-loading'
                        this.buttonDisabled=true  
                        this.$http.post('/papers/edit',this.$qs.stringify({
                              id:this.id,
                              title:this.formData.title,
                              classes_id:this.formData.classes_id,
                              content:JSON.stringify(this.formData.content),
                              item_id:this.formData.item_id
                        })).then(result=>{
                              this.btnIcon=''
                              this.buttonDisabled=false
                              this.$router.push({name:'papersList'})
                        }).catch(error=>{
                              console.log(error)
                        })
                       
                  })
            }
      },
      created(){
            // 调用获取大纲请求方法
            this.getOutlineList()
            // 调用获取选项请求方法
            this.getItemsList()
            // 调用获取班级请求方法
            this.getClassesList()      
      },
      mounted(){
            // 调用获取问卷信息请求方法
            this.getPaperList()
      }
}
</script>
<style>
.el-select{
      width: 100%
}
</style>



